<template>

    <a-form ref="formRef" name="custom-validation" :model="formState" v-bind="layout" @finish="handleFinish">
        <a-row>
            <a-col :span="4">
                <a-form-item has-feedback label="客户" name="cust_id">
                    <a-select allow-clear v-model:value="formState.cust_id">
                        <a-select-option :value="item.key" v-for="item in cust_name_query" :key="item.key">{{ item.name
                            }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
            </a-col>

            <a-col :span="4">
                <a-form-item has-feedback label="关联回访任务" name="task_id">
                    <a-select allow-clear v-model:value="formState.task_id">
                        <a-select-option :value="item.key" v-for="item in task_name_query" :key="item.key">{{ item.name
                            }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col :span="4">
                <a-form-item has-feedback label="跟进人员" name="emp_id">
                    <a-select allow-clear v-model:value="formState.emp_id">
                        <a-select-option :value="item.key" v-for="item in emp_name_query" :key="item.key">{{ item.name
                            }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col :span="4">
                <a-form-item has-feedback label="回访日期" name="actual_date">
                    <a-date-picker  allow-clear format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%"
                        v-model:value="formState.actual_date" />
                </a-form-item>
            </a-col>


            <a-col :span="4">
                <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="primary" html-type="submit">查询</a-button>
                </a-form-item>
            </a-col>
        </a-row>

        <a-row>
            <a-col :span="24">
                <a-flex justify="flex-end">
                    <a-button type="primary" style="margin-left: 10px" @click="handleAdd">新增</a-button>
                </a-flex>
            </a-col>
        </a-row>
    </a-form>


    <a-row>
        <a-col :span="24">
            <a-table size="small" style="width: 100%;" :columns="columns" :data-source="data">
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex === 'name'">
                        <a>{{ text }}</a>
                    </template>
                    <template v-if="column.dataIndex === 'action'">
                        <a type="primary" size="small" style="width: 100%;" @click="handleEdit(record)">编辑</a>
                        <!-- <a type="danger" size="small" style="width: 100%;" @click="handleDelete(record)">删除</a> -->
                    </template>
                </template>
            </a-table>
        </a-col>
    </a-row>

    <a-row>
        <a-drawer v-model:open="open" class="custom-class" root-class-name="root-class-name" style="color: red"
            :title="addFormState.record_id ? '编辑' : '新增'" placement="right">
            <a-form :rules="addRulesForm" ref="addFormRef" name="custom-validation" :model="addFormState"
                v-bind="layout" @finish="addFormState.record_id ? handleEditFinish($event) : handleAddFinish($event)">

                <a-form-item has-feedback label="客户" name="cust_id">
                    <a-select v-model:value="addFormState.cust_id">
                        <a-select-option :value="item.key" v-for="item in custList" :key="item.key">{{ item.name
                            }}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item has-feedback label="关联回访任务" name="task_id">
                    <a-select v-model:value="addFormState.task_id">
                        <a-select-option :value="item.key" v-for="item in taskList" :key="item.key">{{
                            item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item has-feedback label="跟进人员" name="emp_id">
                    <a-select v-model:value="addFormState.emp_id">
                        <a-select-option :value="item.key" v-for="item in empList" :key="item.key">{{ item.name
                            }}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item has-feedback label="回访日期" name="actual_date">
                    <a-date-picker format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%"
                        v-model:value="addFormState.actual_date" />
                </a-form-item>

                <a-form-item has-feedback label="回访方式" name="method">
                    <a-select v-model:value="addFormState.method">
                        <a-select-option :value="item.key" v-for="item in methodList" :key="item.key">{{
                            item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item has-feedback label="回访结果" name="result">
                    <a-textarea v-model:value="addFormState.result" />
                </a-form-item>

                <a-form-item has-feedback>
                    <a-col :span="24">
                        <a-flex justify="flex-end">
                            <a-button type="primary" style="margin-left: 10px" html-type="submit">保存</a-button>
                        </a-flex>
                    </a-col>
                </a-form-item>
            </a-form>
        </a-drawer>
    </a-row>
</template>
<script setup>
import { revisit_record as service } from '@/api/modulesApi/revisit_record';
import { customer as customerService } from '@/api/modulesApi/customer';
import { revisit_task as revisitTaskService } from '@/api/modulesApi/revisit_task';
import employeeService from '@/api/modulesApi/employee';
import { onMounted, reactive, ref } from 'vue';
import { message } from 'ant-design-vue';

// 获取客户列表
const custList = ref([]);
const getCustList = async () => {
    const res = await customerService.getCustList();
    res.data = res.data.map(item => ({
        key: item.cust_id,
        name: item.cust_name
    }));
    custList.value = res.data;
};

// 获取回访任务列表
const taskList = ref([]);
const getTaskList = async () => {
    const res = await revisitTaskService.getRevisitTask();
    taskList.value = res.data.map(item => ({
        key: item.task_id,
        name: item.task_id
    }));
};

// 获取跟进人员列表
const empList = ref([]);
const getEmpList = async () => {
    const res = await employeeService.getEmployee();
    empList.value = res.data.map(item => ({
        key: item.emp_id,
        name: item.emp_name
    }));
};

// 获取查询项客户信息
const cust_name_query = ref([]);
const getCustNameQuery = async () => {
    const res = await service.customer_query();
    cust_name_query.value = res.data;
};

// 获取查询项回访任务信息
const task_name_query = ref([]);
const getTaskNameQuery = async () => {
    const res = await service.task_query();
    task_name_query.value = res.data;
};

// 获取查询项跟进人员信息
const emp_name_query = ref([]);
const getEmpNameQuery = async () => {
    const res = await service.employee_query();
    emp_name_query.value = res.data;
};

const methodList = ref([
    {
        key: '电话',
        name: '电话'
    },
    {
        key: '微信',
        name: '微信'
    },
    {
        key: '拜访',
        name: '拜访'
    },
]);

const columns = [
    {
        title: '回访编号',
        dataIndex: 'record_id',
        key: 'record_id',
    },
    {
        title: '客户',
        dataIndex: 'cust_id',
        key: 'cust_id',
        customRender: ({ text, record }) => {
            return record.cust_name;
        }
    },
    {
        title: '关联回访任务',
        dataIndex: 'task_id',
        key: 'task_id',
    },
    {
        title: '跟进人员',
        dataIndex: 'emp_id',
        key: 'emp_id',
        customRender: ({ text, record }) => {
            return record.emp_name;
        }
    },
    {
        title: '回访日期',
        dataIndex: 'actual_date',
        key: 'actual_date',
    },
    {
        title: '回访方式',
        dataIndex: 'method',
        key: 'method',
    },
    {
        title: '回访结果',
        dataIndex: 'result',
        key: 'result',
    },
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
    },
];
const data = ref([]);

const formRef = ref();
const formState = reactive({
    cust_id: '',
    task_id: '',
    emp_id: '',
    actual_date: '',
});

const open = ref(false);

const addFormState = reactive({
    record_id: '',
    cust_id: '',
    task_id: '',
    emp_id: '',
    actual_date: '',
    method: '',
    result: '',
});
const addFormRef = ref();

const addRulesForm = {
    cust_id: [{ required: true, message: '请选择客户' }],
    task_id: [{ required: true, message: '请选择关联回访任务' }],
    emp_id: [{ required: true, message: '请选择跟进人员' }],
    actual_date: [{ required: true, message: '请选择回访日期' }],
    method: [{ required: true, message: '请选择回访方式' }],
};

const handleAdd = () => {
    addFormState.record_id = '';
    addFormState.cust_id = '';
    addFormState.task_id = '';
    addFormState.emp_id = '';
    addFormState.actual_date = '';
    addFormState.method = '';
    addFormState.result = '';
    open.value = true;
};

const handleAddFinish = async (values) => {
    let res = await service.addRevisitRecord(values);
    message.success('新增成功');
    open.value = false;
    getRevisitRecord();
};

const handleEdit = (record) => {
    addFormState.record_id = record.record_id;
    addFormState.cust_id = record.cust_id;
    addFormState.task_id = record.task_id;
    addFormState.emp_id = record.emp_id;
    addFormState.actual_date = record.actual_date;
    addFormState.method = record.method;
    addFormState.result = record.result;
    open.value = true;
};

const handleEditFinish = async (values) => {
    values.record_id = addFormState.record_id;
    let res = await service.updateRevisitRecord(values);
    message.success('编辑成功');
    open.value = false;
    getRevisitRecord();
};

const handleDelete = async (text) => {
    let res = await service.deleteRevisitRecord({ record_id: text.record_id });
    message.success('删除成功');
    getRevisitRecord();
};

const layout = {
    labelCol: { span: 7 },
    wrapperCol: { span: 14 },
};

const handleFinish = (values) => {
    getRevisitRecord();
};

const getRevisitRecord = async () => {
    const res = await service.getRevisitRecord(formState);
    data.value = res.data;
};

onMounted(() => {
    getRevisitRecord();
    getCustList();
    getTaskList();
    getEmpList();
    getCustNameQuery();
    getTaskNameQuery();
    getEmpNameQuery();
});
</script>